@extends('layouts._default')

@section('title', '购物车-step1')

@section('main')

    <div class="content mar_20">
        <img src="images/extimg/img1.jpg" />
    </div>

    <!--Begin 第一步：查看购物车 Begin -->
    <div class="content mar_20">
        <table class="car_tab" id="app">
            <tr>
                <td>
                    <input type="checkbox" id="selectAll">
                </td>
                <td class="car_th" width="490">商品名称</td>
                <td class="car_th" width="140">属性</td>
                <td class="car_th" width="150">购买数量</td>
                <td class="car_th" width="130">小计</td>
                <td class="car_th" width="150">商品单价</td>
                <td class="car_th" width="150">操作</td>
            </tr>
            <tr v-for="(v,i) in list">
                <td>
                    <input type="checkbox" class="checkbox-data">
                </td>
                <td>
                    <div class="c_s_img"><img :src="v.goods_thumb" width="73" height="73" /></div>
                    @{{ v.goods_name }}
                </td>
                <td align="center">@{{ v.attr_value }}</td>
                <td align="center">
                    <div class="c_num">
                        <input type="button" value="-" @click="decr(i)" class="car_btn_1" />
                        <input type="text" v-model="v.goods_number" name="goods_number" class="car_ipt" />
                        <input type="button" value="+" @click="incr(i)" class="car_btn_2" />
                    </div>
                </td>
                <td align="center" style="color:#ff4e00;">￥@{{ total(i) }}</td>
                <td align="center" style="color:#ff4e00;">￥@{{ v.goods_price }}</td>
                <td align="center">
                    <a @click.prevent="del(i)">删除</a>
                    <a @click.prevent="addColl(i)">加入收藏</a></td>
            </tr>
            <tr height="70">
                <td colspan="6" style="font-family:'Microsoft YaHei'; border-bottom:0;">
                    <label class="r_rad"><input type="checkbox" name="clear" checked="checked" /></label><label class="r_txt">清空购物车</label>
                    <span class="fr">商品总价：<b style="font-size:22px; color:#ff4e00;">￥ @{{ totalPrice }}</b></span>
                </td>
            </tr>
            <tr valign="top" height="150">
                <td colspan="6" align="right">
                    <a href="#"><img src="images/extimg/buy1.gif" /></a>
                    <a href="#"><img src="images/extimg/buy2.gif" /></a>
                </td>
            </tr>
        </table>

    </div>
    <!--End 第一步：查看购物车 End-->

@endsection
@section('js')
    {{--编写js代码--}}
    <script src="{{ mix('js/app.js') }}"></script>
    <script>
        $(document).on('click', '#selectAll' ,function () {
            $(".checkbox-data").prop('checked',$(this).prop('checked'))
        });
        new Vue({
            el:"#app",
            data:{
                list:[
                    {
                        'goods_name' : 'Rio 锐澳 水蜜桃味白兰地鸡尾酒（预调酒） 275ml',
                        'goods_number' : '2',
                        'attr_value' : '颜色：灰色',
                        'goods_price' : '620.00',
                        'goods_thumb' : 'https://source.unsplash.com/300x300/?goods',
                    },
                    {
                        'goods_name' : 'Rio 锐澳 水蜜桃味白兰地鸡尾酒（预调酒） 275ml',
                        'goods_number' : '5',
                        'attr_value' : '颜色：灰色',
                        'goods_price' : '1020.00',
                        'goods_thumb' : 'https://source.unsplash.com/300x300/?beauty',
                    }
                ]
            },
            mounted() {
                {{--$.get("{{ env('api_base_url') }}goods/detail?goods_id=1",res => this.list = res.data );--}}
            },
            methods:{
                incr:function(i){
                    var num = this.list[i]['goods_number'];
                    this.list[i]['goods_number'] = Number(num) + 1;
                    // axios.post("/buyCar/saveNum",this.list[i])
                    // .then( res => this.list = res.data.demo.data);
                },
                decr:function(i){
                    var num = this.list[i]['goods_number'];
                    if(num>1){
                        this.list[i]['goods_number'] = Number(num) - 1;
                        // axios.post("/buyCar/saveNum",this.list[i])
                        // .then( res => this.list = res.data.demo.data);
                    }else{
                        layer.msg('商品的数量不能少于一个')
                    }
                },
                del:function(i){
                    var that = this
                    layer.confirm('你确定要删除此商品吗?',{icon: 3, title:'警告'}, function(index){
                        that.list.splice(i,1);  // 删除某一列
                        layer.msg('删除');
                        layer.close(index);
                    });
                },
                addColl:function(i){
                    layer.msg('添加收藏')
                }

            },
            computed:{
                total:function () {
                    return function (i) {
                        var row = this.list[i];
                        return Number(row.goods_number) * Number(row.goods_price);
                    }
                },
                totalPrice:function () {
                    var num = 0;
                    $.each(this.list,function(index,val){
                        num += Number(val.goods_number) * Number(val.goods_price);
                    });
                    return num;
                }
            }
        });
    </script>
@endsection


